<!DOCTYPE html>
<html dir="ltr">

<head>
  <meta charset="UTF-8">
  <title>Select - Multiple Value</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <link href="../../../../../css/ionic.bundle.css" rel="stylesheet">
  <link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
  <script src="../../../../../scripts/testing/scripts.js"></script>
  <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
  <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script></head>

<body>
  <ion-app>

    <ion-header>
      <ion-toolbar>
        <ion-title>Select Item: Multiple Value</ion-title>
      </ion-toolbar>
    </ion-header>

    <ion-content class="outer-content test-content">

      <ion-item>
        <ion-label>Toppings</ion-label>
        <ion-select id="toppings" multiple="true" cancel-text="Nah" ok-text="Okay!">
          <ion-select-option value="bacon">Bacon</ion-select-option>
          <ion-select-option value="olives">Black Olives</ion-select-option>
          <ion-select-option value="xcheese">Extra Cheese</ion-select-option>
          <ion-select-option value="peppers">Green Peppers</ion-select-option>
          <ion-select-option value="mushrooms">Mushrooms</ion-select-option>
          <ion-select-option value="onions">Onions</ion-select-option>
          <ion-select-option value="pepperoni">Pepperoni</ion-select-option>
          <ion-select-option value="pineapple">Pineapple</ion-select-option>
          <ion-select-option value="sausage">Sausage</ion-select-option>
          <ion-select-option value="Spinach">Spinach</ion-select-option>
        </ion-select>
      </ion-item>

      <ion-item>
        <ion-label>Car Features</ion-label>
        <ion-select id="carFeatures" multiple="true">
          <ion-select-option value="backupcamera">Backup Camera</ion-select-option>
          <ion-select-option value="heatedseats">Headted Seats</ion-select-option>
          <ion-select-option value="keyless">Keyless Entry</ion-select-option>
          <ion-select-option value="navigation">Navigation</ion-select-option>
          <ion-select-option value="parkingassist">Parking Assist</ion-select-option>
          <ion-select-option value="sunroof">Sun Roof</ion-select-option>
        </ion-select>
      </ion-item>

      <ion-item>
        <ion-label>Pets</ion-label>
        <ion-select id="pets" multiple>
          <ion-select-option value="cat">Cat</ion-select-option>
          <ion-select-option value="dog">Dog</ion-select-option>
          <ion-select-option value="turtle">Turtle</ion-select-option>
          <ion-select-option value="fish">Fish</ion-select-option>
        </ion-select>
      </ion-item>

      <ion-item>
        <ion-label>Disabled</ion-label>
        <ion-select id="disabled" multiple disabled value="selected">
          <ion-select-option value="selected">Selected Text</ion-select-option>
        </ion-select>
      </ion-item>

      <ion-item>
        <ion-label>Statuses</ion-label>
        <ion-select id="status" value="selected" multiple>
          <ion-select-option value="selected">Selected</ion-select-option>
          <ion-select-option value="default">Default</ion-select-option>
          <ion-select-option value="disabled" disabled="true">Disabled</ion-select-option>
        </ion-select>
      </ion-item>

      <p aria-hidden="true" class="ion-padding">
        <code>toppings: <span id="toppingsResult"></span></code>
        <br>
        <code>carFeatures: <span id="carFeaturesResult"></span></code>
        <br>
        <code>pets: <span id="petsResult"></span></code>
        <br>
      </p>

      <form>
        <ion-list class="ion-padding-vertical">
          <ion-item>
            <ion-input type="text"></ion-input>
          </ion-item>
          <ion-item>
            <ion-label>Select</ion-label>
            <ion-select id="multiple" multiple="true">
              <ion-select-option value="1">1</ion-select-option>
              <ion-select-option value="2">2</ion-select-option>
              <ion-select-option value="3">3</ion-select-option>
            </ion-select>
          </ion-item>
          <ion-button expand="block" type="submit">Submit</ion-button>
        </ion-list>
      </form>

      <ion-item>
        <ion-label position="floating">Floating label</ion-label>
        <ion-select multiple="true">
          <ion-select-option value="bacon">Bacon</ion-select-option>
          <ion-select-option value="olives">Black Olives</ion-select-option>
          <ion-select-option value="xcheese">Extra Cheese</ion-select-option>
          <ion-select-option value="peppers">Green Peppers</ion-select-option>
          <ion-select-option value="mushrooms">Mushrooms</ion-select-option>
          <ion-select-option value="onions">Onions</ion-select-option>
          <ion-select-option value="pepperoni">Pepperoni</ion-select-option>
          <ion-select-option value="pineapple">Pineapple</ion-select-option>
          <ion-select-option value="sausage">Sausage</ion-select-option>
          <ion-select-option value="Spinach">Spinach</ion-select-option>
        </ion-select>
      </ion-item>

    </ion-content>

    <style>
      .outer-content {
        --background: #f2f2f2;
      }
    </style>

    <script>
      var toppings = document.getElementById('toppings');
      toppings.value = ['bacon', 'xcheese'];

      var carFeatures = document.getElementById('carFeatures');

      var pets = document.getElementById('pets');
      pets.value = ['cat', 'dog'];

      setResults(toppings);
      setResults(carFeatures);
      setResults(pets);

      toppings.addEventListener('ionChange', function (ev) {
        setResults(toppings);
      });
      carFeatures.addEventListener('ionChange', function (ev) {
        setResults(carFeatures);
      });
      pets.addEventListener('ionChange', function (ev) {
        setResults(pets);
      });

      function setResults(select) {
        if (select.id) {
          var resultsEl = document.getElementById(select.id + 'Result');
          if (resultsEl) {
            resultsEl.innerHTML = select.value;
          }
        }
      }
      
      const multiple = document.querySelector('#multiple');
      multiple.value = ['1', '3'];
    </script>
  </ion-app>
</body>

</html>
